<template>
	<view class="wrap">
		<!-- 搜索 -->
		<view class="header">
			<image class="search-icon" src="../../static/homeimg/search.png"></image>
			<navigator class="search-input" url="../../views/search-page/search-page">输入关键字搜索医生</navigator>
		</view>
		<view class="container">
			<!-- 分类 -->
			<view class="tip">
				<!-- 去挂号须知页面 -->
				<view class="prev preregister" @click="$router.push('/views/appointment/appointment')">
					<image class="prev-img" src="../../static/homeimg/yuyueguahao.png"></image>
					<view>预约挂号</view>
				</view>
				<view class="prev payment">
					<image class="prev-img" src="../../static/homeimg/payment.png"></image>
					<view>门诊缴费</view>
				</view>
				<!-- <view class="prev web-service" > -->
				<navigator class="prev web-service" url="/views/vieworders/vieworders">

					<image class="prev-img" src="../../static/homeimg/classifiy.png"></image>
					<view>查看订单</view>
				</navigator>
				<!-- </view> -->
			</view>
			<!-- 患者信息 -->
			<view class="patient-msg">
				<view class="msg">
					<view class="patient-name">
						<text>{{patient[i].name}}</text>
						<text class="change" @click="changecard">切换</text>
					</view>
					<view class="card-num">
						<text>就诊号:</text>
						<text>{{patient[i].idNumber}}</text>
					</view>
					<view class="other-msg">
						<text>暂无待办事项</text>
					</view>
				</view>
				<view>
					<text>性别:</text>
					<text>{{patient[i].sex}}</text>
				</view>
			</view>
			<!-- 服务 -->
			<view class="server">
				<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
				<view class="patient-server" v-if="current==0">
					<u-grid :border="false" col="4" style="width: 100%;">
						<u-grid-item v-for="(item,index) in patientserver" :key="index" style="margin-bottom:10px">
							<image :src="item.img"></image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
				<view class="patient-server" v-if="current==1">
					<u-grid :border="false" col="4" style="width: 100%;">
						<u-grid-item v-for="(item,index) in hospitalServer" :key="index" style="margin-bottom:10px">
							<image :src="item.img"></image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>

			</view>
			<!-- 我的医生 -->
			<view class="mine-doctor">
				<text>我的</text>
				<text class="doc">医生</text>
			</view>
			<!-- 名医 -->
			<view class="suggestdoctor">
				<view class="doctor-item" v-for="(item,index) in doctorList" :key="index" @click="doctorInfo(item)">
					<image class="doctor-img" :src="item.avatar"></image>
					<view class="doctor-name">
						{{item.name}} <van-tag mark type="warning">5.0</van-tag>
					</view>
					<view class="major">
						<text>{{item.department}}</text>
					</view>
					<text>{{item.job}}</text>
				</view>
			</view>
		</view>

		<!-- 切换就诊人面板 -->
		<van-action-sheet v-model:show="showchange" title="切换就诊人">
			<van-radio-group v-model="checked">
				<van-cell-group inset>
					<van-cell v-for="v,i in patient" clickable @click="checkes(i)">
						<view class="card-item">姓名: {{v.name}}</view>
						<view class="card-item">就诊卡号: {{v.idNumber}}</view>
						<template #right-icon>
							<van-radio :name="i" />
						</template>
					</van-cell>
				</van-cell-group>

			</van-radio-group>
			<view class="card-btn" @click="onsurepatient">确定</view>
		</van-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount
	} from 'vue'
	import {
		yuYue
	} from '../../pinia/yuyue'
	import {
		user
	} from '../../pinia/user.js'
	const User = user()
	const yuyue = yuYue()
	import api from '../../lib/request.js'
	// 就诊人信息
	let patient = ref([{
		name: '暂无信息',
		idNumber: '暂无信息',
		sex: '暂无'
	}])
	let list = ref(['患者服务', '住院服务'])
	let current = ref(0)
	let showchange = ref(false) // 切换就诊卡
	let patientserver = ref([{
			title: '报告查询',
			img: '../../static/homeimg/el-report.png',
		},
		{
			title: '就诊卡',
			img: '../../static/homeimg/jiuzhencard.png'
		},
		{
			title: '在线咨询',
			img: '../../static/homeimg/webmenzhen.png'
		},
		{
			title: '送药到家',
			img: '../../static/homeimg/waimai.png'
		},
		{
			title: '电子发票',
			img: '../../static/homeimg/el-bill.png'
		},
		{
			title: '疫苗预约',
			img: '../../static/homeimg/yimiao2.png'
		}
	])
	let hospitalServer = ref([{
			title: '住院充值',
			img: '../../static/homeimg/住院充值.png'
		},
		{
			title: '电子病例',
			img: '../../static/homeimg/病例.png'
		}
	])
	let doctorList = ref([
		{
			avatar:'../../static/mineimg/默认头像.png',
			name:'田安琪',
			id:2,
			job :'主任',
			department :'心内科'
		}
	]) // 医生数组
	let i = ref(0)
	let checked = ref(0)
	const value = ref(5)
	// patient.value = User.patientCard
	onBeforeMount(async () => {
		// 获取绑定的所有就诊人信息
		// let res = await api.get('/user/patient')
		// let {
		// 	code,
		// 	data
		// } = res
		// if (code) {
		// 	patient.value = data
		// }
		// // 获取医生信息
		// let doc = await api.get('/admin/doctor/page?page=1&pageSize=10')
		// let doctors = doc.data.records.filter(item => item.job.includes('主任'))
		// console.log('doctor', doctors)
		// let newd = []
		// doctors.forEach((item, i) => {
		// 	let a = {},
		// 	d = item.doctor
		// 	a.avatar = d.avatar
		// 	a.name = d.name
		// 	a.id = d.id
		// 	a.job = item.job
		// 	a.department = item.department
		// 	newd.push(a)
		// })
		// doctorList.value = newd
		// console.log(newd)
	})

	// 点击医生,跳到医生详情页面,查看医生信息
	const doctorInfo = (item) => {
		let {
			id,
			name
		} = item
		uni.navigateTo({
			url: `/views/doctorinfo/doctorinfo?id=${id}&name=${name}`
		})
	}
	const checkes = (index) => { // 选中的人index
		checked.value = index
	}
	// 切换就诊人信息
	const changecard = () => {
		showchange.value = true
	}
	// 切换就诊人确定按钮
	const onsurepatient = () => {
		i.value = checked.value
		showchange.value = false
		console.log(i.value)
	}

	// 切换服务 患者服务/住院服务
	const sectionChange = (index) => {
		current.value = index;
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		height: calc(100vh - 94px);
		overflow: scroll;
	}

	.header {
		width: 90vw;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 2px 5px;
		background-color: #f4f3f1;
		display: flex;
		align-items: center;
	}

	.search-icon {
		width: 20px;
		height: 20px;
	}

	uni-input {
		height: 100%;
	}

	.search-input {
		height: 28px;
		line-height: 28px;
		color: #999;
		border-radius: 10px;
		padding-left: 10px;
	}

	.container {
		width: 100%;
		padding: 10px 0;
		height: calc(100% - 54px);
	}

	.tip {
		display: flex;
		justify-content: space-between;
	}

	.prev {
		width: 100px;
		height: 100px;
		border: 1px solid #eee;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.container image {
		width: 50px;
		height: 50px;
	}

	.patient-msg {
		width: 100%;
		border-radius: 5px;
		background-color: #e6f0ff;
		box-sizing: border-box;
		margin: 10px auto;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.msg {
		width: calc(100% - 100px);
		font-size: 14px;
		padding: 5px;
	}

	.patient-name {
		font-weight: bold;
	}

	.change {
		margin-left: 20px;
		color: #fff;
		font-size: 12px;
		padding: 3px 5px;
		border-radius: 5px;
		background-color: blue;
	}

	.card-num {
		margin: 5px 0;
		margin: 10px 0;
		color: #999;
	}

	.other-msg {
		color: blue;
	}

	.server {
		width: 100%;
		border: 1px solid #999;
		border-radius: 5px;
	}

	.patient-server {
		margin-top: 20px;
		width: 100%;
		box-sizing: border-box;
		padding: 3px;
	}

	.mine-doctor {
		width: 80px;
		margin: 10px 0 0;
		background-color: #e6f0ff;
		overflow: hidden;
		border-radius: 0 20px 20px 0;
	}

	.doc {
		color: #7caaff;
		display: inline-block;
		padding: 3px 5px;
		background-color: #e6f0ff;

	}

	.suggestdoctor {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
	}

	.doctor-item {
		width: 150px;
		// height: 180px;
		padding: 20px 0;
		box-sizing: border-box;
		border-radius: 10px;
		margin: 12px;
		background-color: #b8d5e654;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}

	.doctor-item>.doctor-img {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.doctor-name {
		margin: 3px 0;
		// display: flex;
		width: 100px;
		// justify-content: space-between;
	}

	.content {
		padding: 16px 16px 160px;
	}

	.card-btns {
		width: 100vw;
		margin-top: 10px;

	}

	.card-item {
		width: 100%;
		height: 30px;
		text-align: left;
		box-sizing: border-box;
		padding: 5px;
	}

	.card-btn {
		width: 100%;
		height: 50px;
		background-color: #42c7ff;
		line-height: 50px;
		text-align: center;
		color: #fff;
		font-size: 20px;
	}
</style>